<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>respimage performance test</title>
	<link href="../assets/css/tidy.css" rel="stylesheet" />
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin-top: 35px;
		}

		.thumbnail {
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 100%;
		}

		.dpr-info {
			position: absolute;
			top: 10px;
			left: 10px;
		}

		.thumbnail img {
			width: 100%;
			height: auto;
		}

		.label-optimum {
			position: absolute;
			bottom: 10px;
			right: 10px;
		}

		.label-config {
			position: fixed;
			top: 20px;
			right: 10px;
			z-index: 99;
			font-size: 120%;
		}

	</style>
</head>
<body>
<!-- 4 : 7 : 6 -->
<div class="alert alert-info alert-legend">
	<p>The numbers on the top are the calculated resolutions for the image:</p>
	<p><span class="label label-success">number in green</span> is the image selected. While <span class="label label-default">number in gray</span> is the next lower and <span class="label label-danger">number in red</span> is the next higher candidate.</p>
	<p>The image on the left side has the <code>data-optimumx</code> attribute attached, while the same image on the right side is always loaded with the full density.</p>
</div>
<div class="alert alert-info">
	<p>As you will see with this demo. Some images do gain significant quality with retina, but some others don't. The standard HTML responsive image markup has no way to tell the browser about does differences, therefore the browser often can't make educated decisions. The optimumx plugin solves this by limiting the source canidates to reasonable ones.</p>
</div>
<table class="table table-condensed table-striped">
	<thead>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							data-optimumx="2.5"
							src="http://placehold.it/175x75"
							data-srcset="http://placehold.it/175x75 175w,
					http://placehold.it/350x150 350w,
					http://placehold.it/525x225 525w,
					http://placehold.it/788x338 788w,
					http://placehold.it/1182x507 1182w,
					http://placehold.it/1773x761 1773w,
					http://placehold.it/2659x1141 2659w"
							alt="Abandoned Boat" />
				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="http://placehold.it/175x75"
							data-srcset="http://placehold.it/175x75 175w,
				http://placehold.it/350x150 350w,
				http://placehold.it/525x225 525w,
				http://placehold.it/788x338 788w,
				http://placehold.it/1182x507 1182w,
				http://placehold.it/1773x761 1773w,
				http://placehold.it/2659x1141 2659w"
							alt="Abandoned Boat" />
				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg"
							data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg 768w,
https://farm1.staticflickr.com/192/504251019_af1d042c1a_o.jpg 1944w"
							data-optimumx="1.3"
							alt="Windows on Istanbul" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg"
							data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg 768w,
https://farm1.staticflickr.com/192/504251019_af1d042c1a_o.jpg 1944w"
							alt="Windows on Istanbul" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_z.jpg 640w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_b.jpg 1024w,
https://farm6.staticflickr.com/5139/5546134597_82084e246c_o.jpg 2844w"
							data-optimumx="1.2"
							alt="Goldie Dawn" />

				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_z.jpg 640w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_b.jpg 1024w,
https://farm6.staticflickr.com/5139/5546134597_82084e246c_o.jpg 2844w"
							alt="Goldie Dawn" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg"
							data-srcset="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg 240w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e.jpg 500w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg 1024w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_z.jpg 640w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_n.jpg 320w,
https://farm5.staticflickr.com/4094/4859138371_a1b9081485_o.jpg 3648w"
							data-optimumx="1.4"
							alt="Abandoned Boat" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg"
							data-srcset="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg 240w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_n.jpg 320w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e.jpg 500w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_z.jpg 640w,
https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg 1024w,
https://farm5.staticflickr.com/4094/4859138371_a1b9081485_o.jpg 3648w"
							alt="Abandoned Boat" />
				</div>

			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w,
https://farm6.staticflickr.com/5531/9638435181_ecbab20fc0_h.jpg 1600w,
https://farm6.staticflickr.com/5531/9638435181_9da37d35d4_k.jpg 2048w,
https://farm6.staticflickr.com/5531/9638435181_6b5ed94330_o.jpg 3648w"
							data-optimumx="1.7"
							alt="Desert Road" />
				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w,
https://farm6.staticflickr.com/5531/9638435181_ecbab20fc0_h.jpg 1600w,
https://farm6.staticflickr.com/5531/9638435181_9da37d35d4_k.jpg 2048w,
https://farm6.staticflickr.com/5531/9638435181_6b5ed94330_o.jpg 3648w"
							alt="Desert Road" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg"
							data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w,
https://farm5.staticflickr.com/4078/5441060528_b066ce464a_o.jpg 1932w"
							data-optimumx="1.4"
							alt="" />
				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg"
							data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w,
https://farm5.staticflickr.com/4078/5441060528_b066ce464a_o.jpg 1932w"
							alt="" />

				</div>
			</td>
		</tr>
		<tr>
			<th>with <code>data-optimumx</code></th>
			<th>without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg"
							data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w,
https://farm9.staticflickr.com/8200/8248153196_439515a267_h.jpg 1600w,
https://farm9.staticflickr.com/8200/8248153196_891960c5f5_k.jpg 2048w,
https://farm9.staticflickr.com/8200/8248153196_c259fd3d58_o.jpg 9910w"
							data-optimumx="1.5"
							alt="@ The Desert Tortoise Natural Area" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg"
							data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w,
https://farm9.staticflickr.com/8200/8248153196_439515a267_h.jpg 1600w,
https://farm9.staticflickr.com/8200/8248153196_891960c5f5_k.jpg 2048w,
https://farm9.staticflickr.com/8200/8248153196_c259fd3d58_o.jpg 9910w"
							alt="@ The Desert Tortoise Natural Area" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>


				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da_z.jpg?zz=1 640w"
							data-optimumx="1.7"
							alt="Borobudur" />

				</div>
			</td>
			<td>


				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da_z.jpg?zz=1 640w"
							alt="Borobudur" />

				</div>
			</td>
		</tr>
		<tr>
			<th>with <code>data-optimumx</code></th>
			<th>without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg"
							data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_b.jpg 768w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_o.jpg 1536w"
							data-optimumx="2"
							alt="A tree in the blue" />

				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg"
							data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_b.jpg 768w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_o.jpg 1536w"
							alt="A tree in the blue" />

				</div>
			</td>
		</tr>
		<tr>
			<th>with <code>data-optimumx</code></th>
			<th>without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
							data-optimumx="1.7"
							alt="Sant Miquel del Fai" />

				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
							alt="Sant Miquel del Fai" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_z.jpg 640w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_b.jpg 1024w,
https://farm3.staticflickr.com/2727/4393975099_4413ef4037_o.jpg 1600w"
							data-optimumx="1.5"
							alt="Avebury Stone Circle" />

				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg"
							data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_z.jpg 640w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_b.jpg 1024w,
https://farm3.staticflickr.com/2727/4393975099_4413ef4037_o.jpg 1600w"
							alt="Avebury Stone Circle" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
							data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w,
https://farm4.staticflickr.com/3059/2835191823_c3bdbcbbee_o.jpg 3028w"
							data-optimumx="1.4"
							alt="el castil de tierra" />

				</div>
			</td>
			<td>

				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
							data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w,
https://farm4.staticflickr.com/3059/2835191823_c3bdbcbbee_o.jpg 3028w"
							alt="el castil de tierra" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>


				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg"
							data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_z.jpg 640w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_c.jpg 800w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_b.jpg 1024w,
https://farm8.staticflickr.com/7356/11122919374_dba478083f_h.jpg 1600w,
https://farm8.staticflickr.com/7356/11122919374_237fb819f1_k.jpg 2048w,
https://farm8.staticflickr.com/7356/11122919374_58ccd9e84c_o.jpg 3294w"
							data-optimumx="1.3"
							alt="sunset" />

				</div>
			</td>
			<td>


				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg"
							data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_z.jpg 640w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_c.jpg 800w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_b.jpg 1024w,
https://farm8.staticflickr.com/7356/11122919374_dba478083f_h.jpg 1600w,
https://farm8.staticflickr.com/7356/11122919374_237fb819f1_k.jpg 2048w,
https://farm8.staticflickr.com/7356/11122919374_58ccd9e84c_o.jpg 3294w"
							alt="sunset" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_z.jpg 640w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_c.jpg 800w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_b.jpg 1024w,
https://farm6.staticflickr.com/5506/11122805655_2992b75835_h.jpg 1600w,
https://farm6.staticflickr.com/5506/11122805655_a6418efdc5_k.jpg 2048w,
https://farm6.staticflickr.com/5506/11122805655_c2bf7d14ea_o.jpg 3008w"
							data-optimumx="2.2"
							alt="Sky and earth" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg"
							data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_z.jpg 640w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_c.jpg 800w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_b.jpg 1024w,
https://farm6.staticflickr.com/5506/11122805655_2992b75835_h.jpg 1600w,
https://farm6.staticflickr.com/5506/11122805655_a6418efdc5_k.jpg 2048w,
https://farm6.staticflickr.com/5506/11122805655_c2bf7d14ea_o.jpg 3008w"
							alt="Sky and earth" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg"
							data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_b.jpg 768w,
https://farm4.staticflickr.com/3023/2994603808_8ac98ed34d_o.jpg 3648w"
							data-optimumx="1.4"
							alt="Missing Ulsoor lake (Explore)" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg"
							data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_b.jpg 768w,
https://farm4.staticflickr.com/3023/2994603808_8ac98ed34d_o.jpg 3648w"
							alt="Missing Ulsoor lake (Explore)" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg"
							data-srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg 354w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_z.jpg 453w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_b.jpg 725w,
https://farm7.staticflickr.com/6211/6254520191_6878432c01_o.jpg 3407w"
							data-optimumx="1.5"
							alt="Oxford Path 2" />

				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg"
							data-srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg 354w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_z.jpg 453w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_b.jpg 725w,
https://farm7.staticflickr.com/6211/6254520191_6878432c01_o.jpg 3407w"
							alt="Oxford Path 2" />

				</div>
			</td>
		</tr>
		<tr>
			<th style="width: 50%;">with <code>data-optimumx</code></th>
			<th style="width: 50%;">without <code>data-optimumx</code></th>
		</tr>
		<tr>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload optimumx"
							src="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg"
							data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
							data-optimumx="2"
							alt="Woman in water" />
				</div>
			</td>
			<td>
				<div class="thumbnail">
					<img
							data-sizes="auto"
							class="lazyload"
							src="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg"
							data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
							alt="Woman in water" />
				</div>
			</td>
		</tr>
	</tbody>
</table>









<script src="https://afarkas.github.io/respimage/respimage.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
	var params = {};
	(function(){

		location.search.replace(/^\?/, '').split('&').forEach(function(param){
			param = param.split('=');
			params[param[0]] = param[1] || '';
		});
		Array.prototype.slice.call(document.querySelectorAll('img[data-sizes="auto"].optimumx')).forEach(function(elem){
			var optimum = elem.getAttribute('data-optimumx') || 3;
			$(elem).after('<strong class="label label-success label-optimum">image specific optimum: '+ optimum +'</strong>');

		});

		if(params.optimumx){
			Array.prototype.slice.call(document.querySelectorAll('img[data-sizes="auto"].optimumx')).forEach(function(elem){
				elem.setAttribute('data-optimumx', params.optimumx);
			});
		}

		function ascendingSort( a, b ) {
			return a.w - b.w;
		}

		function mapSetCan(can){
			var nCan = {
				url: can.url
			};
			nCan[can.desc.type] = can.desc.val;
			return nCan;
		}

		Array.prototype.slice.call(document.querySelectorAll('img[data-srcset]')).forEach(function(elem){
			var lazyData = {srcset: elem.getAttribute('data-srcset')} || '';
			var cands = respimage._.parseSet(lazyData);

			elem._demoSrcset = lazyData;

			if(cands[0] && cands[0].desc){
				cands = cands.map(mapSetCan);
				lazyData.cands = cands;
			}

			cands.sort(ascendingSort);
		});
	})();
</script>
<script>
	window.lazySizesConfig = window.lazySizesConfig || {};
	window.lazySizesConfig.loadMode = 1;
</script>
<script src="../lazysizes.min.js"></script>
<script src="../plugins/optimumx/ls.optimumx.min.js"></script>
<script>

	(function(){

		var dpr = (window.devicePixelRatio || 1);
		var max = params.optimumx || 'image specific optimum';
		var calcDpr = Math.min(dpr, max) || params.optimumx == 'auto' ? 'what the default <code>getOptimumX</code></code> callback returns' : 'image specific';
		$('<div class="alert alert-info"><p>Your device has a pixel ratio of '+ dpr +', ' +
		'while <code>data-optimumx="'+ max +'"</code> is set.</p>' +
		'<p>This means images should be around a pixel density of "'+ calcDpr +'".</p></div>')
				.insertAfter('.alert-legend');

		$('body').before('<strong class="label label-default label-config">Used optimumx option: '+max+'</strong>');

	})();
	(function(){
		var timer;
		var _ = window.respimage._;
		var dpr = _.DPR;
		var showdpr = function(){
			var beforeCandidate, afterCandidate, curCandidate, can, curRes, size;
			var info = '<div class="dpr-info">';
			var img = this;
			var imgData = this._demoSrcset;
			var curSrc = this.currentSrc || this.src;

			if(!imgData || !curSrc){return;}
			beforeCandidate = '<strong class="label label-default">--</strong>';
			afterCandidate = '<strong class="label label-danger">--</strong>';
			curCandidate = '<strong class="label label-success">--</strong>';
			size = '';

			for(var i = 0; i < imgData.cands.length; i++){
				can = imgData.cands[i];
				if(can.url == curSrc){
					curRes = Math.floor((can.w / this.offsetWidth) * 1000) / 1000;

					curCandidate = '<strong class="label label-success">'+ curRes +'x</strong>';
					can = imgData.cands[i - 1];
					if(can){
						beforeCandidate = '<strong class="label label-default">'+ (Math.floor((can.w / this.offsetWidth) * 1000) / 1000) +'x</strong>';
					}
					can = imgData.cands[i + 1];
					if(can){
						afterCandidate = '<strong class="label label-danger">'+ (Math.floor((can.w / this.offsetWidth) * 1000) / 1000) +'x</strong>';
					}

					size = '<br /><strong class="label label-danger">Estimated file size: '+ Math.round(this.offsetWidth * this.offsetHeight * Math.pow(curRes, 2) / 1500) +'kb</strong>';
					break;
				}
			}

			info += beforeCandidate +' '+ curCandidate +' ' + afterCandidate + size;

			info += '</div>';
			$(img)
					.parent()
					.find('.dpr-info')
					.remove()
					.end()
					.append(info)
			;
		};

		var showDprs = function(){
			$('img').each(showdpr);
		};
		var tShowDprs = function(){
			clearTimeout(timer);
			timer = setTimeout(showDprs, 300);
		};
		document.addEventListener('load', tShowDprs, true);
		window.addEventListener('resize', tShowDprs);
	})();
</script>
</body>
</html>
